<template>
	<base-page class="edit-form base-form" style="width: 100vw" title="请假申请" @back="onCancel">
		<view class="main-box">
			<view class="content-box">
				<u-form ref="mobileApplyInfoRef" :rules="rules" :model="formData" label-width="120px" label-align="left"
					:errorType="['border-bottom', 'message']">
					<u-row gutter="0">
						<u-col :span="12">
							<view class="mt-16">
								<view class="u-cell-group" style="padding: 5px">
									<u-row gutter="0">
										<u-col :span="12">
											<field-upload ref="photograph" label="请假图片" :required="true" prop="path"
												v-model="formData.path"
												:action="getUploadActionUrl('/admin/mobile/mobileEntry/uploadImage')"
												name="uploadFile" :header="getUploadHeaders" @input="onUploadSuccess"
												:file-list="fileList"
												:formData="{ fieldName: 'photograph', asImage: false }"
												:downloadParams="{ id: formData.id, fieldName: 'path', asImage: false }"
												:maxCount="1" :disabled="false" :isImage="true" />
										</u-col>
									</u-row>
								</view>
							</view>
						</u-col>
					</u-row>
				</u-form>
			</view>
		</view>
		<view class="menu-box">
			<u-button :custom-style="{ width: '100%' }" style="flex-grow: 1; margin-left: 8px" type="primary"
				size="medium" @click="onAddClick()">
				提交
			</u-button>
		</view>

		<u-modal :mask-close-able="true" v-model="showM" @confirm="confirm" ref="uModal" show-cancel-button
			:content="content"></u-modal>
	</base-page>
</template>

<script>
import {
	showMessage,
	getToken
} from '@/utils';
import {
	CourseInfoController,
} from '@/api';
import {
	uploadMixin,
	statsDateRangeMixin
} from '@/utils/mixins';
import projectConfig from '@/core/config'
export default {
	name: 'mobileApplyInfo',
	mixins: [uploadMixin, statsDateRangeMixin],
	data() {
		return {
			formData: {
				// id
				id: undefined,
				// 班级id
				classId: undefined,
				// 姓名
				name: undefined,

				officerId: undefined,
				// 手机号码
				path: undefined,

			},
			content: "提交成功，返回到我的课表",
			showM: false,
			classIdWidget: [],
			ganbuWidget: {},
			rules: {
				'name': [{
					required: true,
					message: '请输入姓名',
					trigger: 'blur',
					transform: (value) => String(value)
				}],
				'phone': [{
					required: true,
					message: '请输入手机号码',
					trigger: 'blur',
					transform: (value) => String(value)
				}],

				'jobTitle': [{
					required: true,
					message: '请填写职务',
					trigger: 'blur',
					transform: (value) => String(value)
				}],

			},
			fileList: []

		}
	},
	onLoad(data) {

		if (data.data) {
			this.ganbuWidget = JSON.parse(decodeURIComponent(data.data))
		}

	},
	computed() { },
	methods: {


		objectToQueryString(params) {
			if (params == null) {
				return null;
			} else {
				return Object.keys(params)
					.map(key => {
						if (params[key] !== undefined) {
							return `${key}=${params[key]}`;
						} else {
							return undefined;
						}
					})
					.filter(item => item != null)
					.join('&');
			}
		},
		buildGetUrl(actionName, params) {
			const queryString = this.objectToQueryString(params);
			if (actionName != null && actionName !== '') {
				if (actionName.substring(0, 1) === '/') actionName = actionName.substring(1);

				return (
					projectConfig.baseUrl + actionName + (queryString == null ? '' : '?' + queryString)
				);
			}
		},
		getUploadFileUrl(item, params) {

			if (item == null || item.downloadUri == null) {
				return null;
			} else {

				const query = {};
				query.Authorization = getToken();
				query.filename = params

				return this.buildGetUrl(item.downloadUri, query);
			}
		},
		onUploadSuccess(data, index, fileList, name) {
			this.fileList = []
			this.fileList.push({
				src: this.getUploadFileUrl(JSON.parse(data)[0], JSON.parse(data)[0].filename)
			})
			this.formData.path = (data)
			console.log(this.formData.path);
			console.log(this.fileList.src);

		},
		onCancel() {
			uni.navigateBack();
		},

		changeGan(val, val2) {
			this.formData.officerId = val2.id
			this.formData.jobTitle = val2.jobTitle
			this.formData.name = val2.name
			this.formData.phone = val2.phone
		},
		confirm() {
			this.showM = false;
			uni.navigateTo({
				url: "/views/generated/mobileStudentmyCourse"
			})
		},
		/**
		 * 提交
		 */
		onAddClick() {
			this.$refs.mobileApplyInfoRef.validate((valid) => {
				if (!valid) return;
				if (this.formData.path == undefined) {
					this.$u.toast('请上传请假图片');
					return;
				}
				let params = {
					leaveInfoDto: {
						courseId: this.ganbuWidget.id,
						path: this.formData.path,
					}
				};
				CourseInfoController.leaveInfoAdd(this, params)
					.then((res) => {
						if (res) {
							this.$u.toast('操作成功');
							this.showM = true;
						} else {
							this.$u.toast('操作失败');
						}

					})
					.catch((e) => { });
			});
		},

	},
	computed: {

	},
	mounted() { }
};
</script>

<style scoped></style>